<template>
	<view class='shopList'>
		<search></search>
		<u-sticky offset-top="0">
			<view class='tongji dFlex jBetween_aCenter' style="padding:5px 12px;font-size: 14px;color:#666" v-if="goods_category">
				<text>{{goods_category}}</text>
			</view>
			<view class='tongji dFlex jBetween_aCenter'>
				<text>{{data_count}} {{$t('shopList.num')}}</text>
				<u-icon :name="mode=='1'?'list-dot':'grid'" size='20px' @click='mode = mode == "1"?"2":"1"'></u-icon>
			</view>
			<!-- <view class='screen dFlex jAround_aCenter'>
				<view class='line'>
					<u-icon name="arrow-down" size='14px' labelSize='14px' labelPos='left' label='品牌品牌品牌品牌品牌品牌品牌品牌品牌'></u-icon>
				</view>
				<view class='line'>
					<u-icon name="arrow-down" size='14px' labelSize='14px' labelPos='left' label='价格品牌品牌品牌'></u-icon>
				</view>
			</view> -->
		</u-sticky>
		<view class='content' v-if="dataLists.length>0"> 
			<!-- 横向 -->
			<view class='list dFlex jBetween_aStart fWap' v-show='mode=="1"'>
				<view class='discount_one' v-for="(item,index) in dataLists" :key='index' @click="goDetail(item)">
					<view class="shopImg imgPublic dFlex jCenter_aCenter">
						<image :src="item.image" mode="widthFix"></image>
						<view class='score dFlex jCenter_aCenter'>
							<u-icon name="star-fill" :label='item.score' labelPos='left' labelSize='13px'
								color='#f8e801' size='13px'></u-icon>
							<text>({{item.collect_count}})</text>
						</view>
						<view class="tools dFlex jBetween_aCenter">
							<view class="carIcon dFlex jCenter_aCenter" @click.stop="addFavorite(item)">
								
								<u-icon name="../static/images/xinyuan1.png" size='20px' v-if="item.is_collect==1"></u-icon>
								<u-icon name="../static/images/xinyuan.png" size='20px' v-else></u-icon>
							</view>
							<view class="carIcon dFlex jCenter_aCenter" @click.stop="addCart(item)">
								<u-icon name="../static/menu5_1.png" size='20px'></u-icon>
							</view>
						</view>
					</view>
					<view class='shopInfo'>
						<view class="shopName">{{item.goods_name}}</view>
						<view class="shopName" style="font-size: 12px;">{{item.unit}}</view>
						<view class="shopPrice dFlex jStart_aCenter">
							
							<view class='newPrice'>SAR {{item.shop_price}} </view>
							<view class='oldPrice' style="margin-left: 10px;">{{item.market_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 竖向 -->
			<view class='list dFlex jBetween_aStart fWap' v-show='mode=="2"'>
				<view class="shopOne dFlex jStart_aStart" v-for="(item,index) in dataLists" :key='index'  @click="goDetail(item)">
					<view class='shopImg imgPublic'>
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class='shopInfo'>
						<view class='shopName'>{{item.goods_name}}</view>
						<view class="shopName" style="font-size: 12px;">{{item.unit}}</view>
						<view class='shopPrice dFlex jStart_aCenter'>
							<view class='newPrice'>SAR<text>{{item.shop_price}}</text></view>
							<view class='oldPrice'>{{item.market_price}}</view>
						</view>
						<!--  -->
						<view class=" dFlex jStart_aCenter">
							<view class='score dFlex jCenter_aCenter'>
								<u-icon name="star-fill" :label='item.score' labelPos='left' labelSize='13px'
									color='#f8e801' size='13px'></u-icon>
								<text>({{item.collect_count}})</text>
							</view>
							<view style="margin-left:30px;" class="carIcon dFlex jCenter_aCenter" @click.stop="addFavorite(item)">
								<u-icon v-if="item.is_collect==1" name="heart-fill" size='20px'></u-icon>
								<u-icon v-else name="heart" size='20px'></u-icon>
							</view>
							<view style="margin-left:10px;" class="carIcon dFlex jCenter_aCenter" @click.stop="addCart(item)">
								<u-icon name="../static/menu5_1.png" size='20px'></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else :text='$t("coupon.empty")' mode="data" >
		</u-empty>
		<!-- 底部工具 -->
		<!-- <view class='bottomTool dFlex jCenter_aCenter' v-if='scrollTop > 300'>
			<view class='toolOne dFlex jCenter_aCenter'>
				<u-icon name="info" :label='$t("shopList.sort")' color='#ffffff' labelColor='#ffffff'
					labelPos='left'></u-icon>
			</view>
			<view class='toolOne dFlex jCenter_aCenter'>
				<u-icon name="pushpin-fill" :label='$t("orders.label1")' color='#ffffff' labelColor='#ffffff'
					labelPos='left'></u-icon>
			</view>
		</view> -->
		<pageBottom></pageBottom>
		<!-- 登录弹窗 -->
		<u-popup :show="loginDialog" mode="center">
			<login @close="loginDialog=false"></login>
		</u-popup>
	</view>
</template>

<script>
	import login from '@/components/login.vue';
	import search from '@/components/search.vue';
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			login,
			search,
			pageBottom
		},
		data() {
			return {
				goods_category: '',
				mode: '1',
				scrollTop: '',
				keyword: '',
				cid: '',
				page: 1,
				loadStatus: 'loadmore',
				dataLists: [],
				data_count: 0,
				loginDialog: false
			};
		},
		onLoad(options) {
			this.cid = options.cid ?? ''
			this.keyword = options.keyword ?? ''
			this.getcategory()
			this.init();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.shopList'),
			})
		},
		onPullDownRefresh() {
			this.dataLists =[];
			this.page = 1;
			this.init()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		onReachBottom() {
			this.init()
		},
		methods: {
			async init() {
				const {
					dataLists,
					page,
					loadStatus,
					count
				} = await this.$tools.loadingFun('/goods/goodsList', {
					id: this.cid,
					keyword: this.keyword
				}, this.dataLists, this.page, this.loadStatus);
				
				this.dataLists = dataLists;
				this.page = page;
				this.loadStatus = loadStatus;
				console.log(count);
				if(count>0){
					this.data_count = count
				}
				
			},
			async getcategory() {
				const result = await this.$api('/goods/getcategory', {
					id: this.cid,
				})
				this.goods_category = result.name
			},
			async addFavorite(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				await this.$tools.addFavorite(item)
				this.dataLists = []
				this.page = 1
				this.loadStatus = 'loadmore'
				this.init()
			},
			addCart(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				this.$tools.addCart(item)
				// this.init()
			},
			goDetail(item) {
				uni.navigateTo({
					url: './goodDetail?id=' + item.goods_id
				})
			},
			handleSearch() {
				this.dataLists = []
				this.page = 1
				this.loadStatus = 'loadmore'
				this.init()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
	.bottomTool {
		.toolOne {
			width: 50%;
		}

		width: 140px;
		padding:6px;
		box-sizing: border-box;
		// background: rgba(5,97,48,0.8);
		background: $main;
		position: fixed;
		bottom: 10vh;
		left: calc((100% - 150px) / 2);
		border-radius: 50px;
		z-index: 10;
	}

	.screen {
		.line {
			::v-deep.u-icon__label {
				display: inline-block;
				max-width: 150px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			width: max-content;
			display: inline-block;
		}

		width:100%;
		padding:5px 0 8px;
		overflow:hidden;
		text-overflow: ellipsis;
		background: white;
	}

	.list {
		.shopOne {
			.shopInfo {
				.quan {
					.quanIcon {
						width: 10px;
						height: 10px;
						margin-right: 10px;
					}

					background:rgba(56, 174, 4, 0.05);
					width:100%;
					border: 1px dashed #38ae04;
					font-size:12px;
					border-radius: 5px;
					padding:4px 8px;
					color:#38ae04;
					box-sizing: border-box;
				}

				.shopPrice {
					.oldPrice {
						font-size: 12px;
						margin-left: 12px;
						color: #7e859b;
						text-decoration: line-through;
					}

					.newPrice {
						font-weight: bold;

						text {
							font-size: 16px;
							display: inline-block;
							margin-left: 5px;
						}
					}

					width:100%;
					margin:6px 0;
				}

				.shopName {
					width: 100%;
					display: -webkit-box;
					/* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列 */
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					/* 隐藏超出范围的内容 */
					text-overflow: ellipsis;
					/* 使用省略号 */
				}

				width:calc(100% - 112px);
			}

			.shopImg {
				width: 100px;
				margin-right: 12px;
			}

			width:100%;
			padding:12px;
			background:white;
			box-sizing: border-box;
			border-bottom: 5px solid #f7f7fa;
		}

		.discount_one {
			.shopInfo {
				.shopPrice {
					width: 100%;

					.newPrice {
						font-weight: bold;
						font-size: 16px;
					}

					.oldPrice {
						text-decoration: line-through;
						margin-right: 10px;
					}
				}

				.shopName {
					width: 100%;
					overflow: hidden;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					margin-bottom: 5px;
				}

				width:100%;
				padding:10px;
				box-sizing: border-box;
				// background:#ececec;
			}

			.shopImg {
				width: 100%;
				height: 100%;
				background: white;
				position: relative;

				.score {
					text {
						font-size: 12px;
						display: inline-block;
						padding-left: 5px;
						margin-left: 5px;
						border-left: 1px solid #999999;
					}

					min-width:50px;
					border-radius: 50px;
					background: white;
					padding: 4px 5px;
					position: absolute;
					top:12px;
					right:12px;
					font-size: 13px;
				}

				.tools {
					width: calc(100% - 24px);
					position: absolute;
					right: 12px;
					bottom: 12px;

					.carIcon {
						width: 24px;
						height: 24px;
						padding: 2px;
						box-sizing: border-box;
						background: white;
						border-radius: 4px;
						text-align: center;
						line-height: 20px;
						box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
					}
				}
			}

			width:48%;
			margin-bottom: 15px;
			overflow: hidden;
			background:white;
			border-radius:3px;
			box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
		}

		width:100%;
		padding:0 12px 12px;
		margin-top: 12px;
		box-sizing: border-box;
	}

	::v-deep.u-sticky {
		top: 0 !important;
	}

	.tongji {
		font-size: 12px;
		color: #999999;
		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
		background: white;
	}
</style>